
<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/template/main_mobile.xhtml" contentType="text/html"
	renderKitId="PRIMEFACES_MOBILE">
	
	<h:outputStylesheet name="css/foundation.css" />
	<h:outputStylesheet name="css/custom_styles.css"></h:outputStylesheet>
	
	<pm:page title="Drinks">
	
			<p:growl id="messages" globalOnly="true" />
	
			<!-- Main View -->
			<pm:view id="main">
			
				<pm:header title="Novo Drink" swatch="e">
					<f:facet name="left">
						<p:button style="width:10; height:30; border:1px solid #000;" 
							value="#{messages['button.back']}" icon="back"
							href="#{drinkEditMB.previousView}"/>
					</f:facet>
					<f:facet name="right">
						<p:button value="#{messages['main.app.title']}" icon="home"
									 href="./navigator.jsf"/>
					 </f:facet>
				</pm:header>
			
				<pm:content>
					<h:form>
					<h:panelGroup styleClass="row fullWidth" layout="block" id="panelGroup">
						<div class="medium-4 columns" style="text-align:center;">
							<h:graphicImage name="images/Logo.png" width="100px;" /> <br/><br/>
							<h5>Adicionar Ingredientes:</h5>
							<div class="ingredientes">
							<ui:repeat value="#{ingredienteListMB.resultList}" var="ingrediente" >
									<br/>
									<h:commandLink update=":panelDrinks" action="#{novoDrinkMB.adicionarIngrediente}">
										<f:setPropertyActionListener target="#{novoDrinkMB.id}" value="#{ingrediente.id}"></f:setPropertyActionListener>
										<h:graphicImage value="/image?id=#{ingrediente.id}" />
									</h:commandLink> 
									<br />
							</ui:repeat>
							</div>
							<br/>
						</div>
						<div class="medium-8 columns" style="text-align:center;">
							<h:panelGroup styleClass="panel radius" layout="block" id="panelDrinks">
								<p:inputText id="nomeDrink" value="#{novoDrinkMB.nomeDrink}"/>									
								<p:watermark value="Digite o nome" for="nomeDrink"></p:watermark>
								<p:pieChart value="#{novoDrinkMB.chart}" legendPosition="w" rendered="#{not empty novoDrinkMB.composicao}" title="Composição"/>
								<h:panelGroup styleClass="row" layout="block" rendered="#{not empty novoDrinkMB.composicao}">
									<div class="medium-6 columns" style="text-align:center;">
											<h6>Tamanho:</h6>
												<h:selectOneMenu value="#{novoDrinkMB.tamanho}">
													<f:selectItem itemLabel="Pequeno (200ml)" itemValue="P"/>
											      	<f:selectItem itemLabel="Médio (350ml)" itemValue="M"/>
											      	<f:selectItem itemLabel="Grande (500ml)" itemValue="G"/>
												</h:selectOneMenu>
											
									</div>
									<div class="medium-6 columns" style="text-align:center;">
											<h6>Misturador:</h6>
											<h:selectOneMenu value="#{novoDrinkMB.tamanho}">
													<f:selectItem itemLabel="Copo" itemValue="P"/>
											      	<f:selectItem itemLabel="Liquidificador" itemValue="M"/>
												</h:selectOneMenu>
									</div>
									<div class="row">
										
										<div class="medium-4 columns">
											<br/><br/>
											<h:graphicImage name="images/cancelar.png"  width="80" height="80" />
										</div>
										<div class="medium-4 columns">
											<br/><br/>
											<h:commandLink action="#{novoDrinkMB.salvar()}" >
												<h:graphicImage name="images/salvar.png" width="80" height="80" />
											</h:commandLink>
										</div>
										<div class="medium-4 columns">
											<br/><br/>
											<h:graphicImage name="images/salvar_misturar.png"  width="80" height="80" />
										
										</div>
									</div>
								</h:panelGroup>
								
							</h:panelGroup>
						</div>
					</h:panelGroup>
					</h:form>
				</pm:content>
			</pm:view>
		</pm:page>
	
</f:view>